<html>
<head>
    <title>DeviceOrientationEvent</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="js/zepto.min.js"></script>
    <style>
        html{height: 100%;}
        html,p,div,img {margin:0;font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}
        body {
            background-size: 100% 100%;
            padding: 0;text-align: center;font-family: 'open sans';
            /*position: relative;*/
            margin: 0;width:100%;height: 100%;-webkit-font-smoothing: antialiased;
        }

        .container{
            background: url("img/6/background.png") no-repeat;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .tree {
            margin-top: 10%;
            background: url("img/6/tree.png") no-repeat;
            width: 100%;
            height: 80%;
            background-size: 100% 100%;
            overflow: hidden;
        }
        .tree img {
            width: 100%;
        }

        .sock {
            width: 50px;
            height: 60px;
        }

        .scok-1 {
            position: absolute;
            top: 20%;
            left: 40%;
        }
        .scok-2 {
            position: absolute;
            top: 40%;
            right: 30%;
        }
        .scok-3 {
            position: absolute;
            top: 60%;
            left: 30%;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        .rule {
            color: red;
            font-size: 0.4rem;
            width: 80%;
          margin-left: 10%;
        }
        .liuliang {
            color: green;
            font-size: 0.5rem;
            font-weight: 500;

        }

        .container .logos{
            position: absolute;
            left: 5%;
            top: 3%;
            width: 40%;
            height: auto;
        }
        .container .logos img{
            width: 100%;
            height: auto;
        }
    </style>

</head>

<script>
    $(document).ready(function(){

        var html = document.querySelector('html');
        var rem = html.offsetWidth /10;
        html.style.fontSize = rem + "px";

        $(".scok-1").tap(function (){
               getRight(1);
        });
        $(".scok-2").tap(function (){
            getRight(2);
        });
        $(".scok-3").tap(function (){
            getRight(3);
        });


        function getRight(id) {
            alert(id);
            location.href = "award_tree.html?win=1";

            $.ajax({
                type: "GET",
                url: "/Christmas/saveWinner",
                data: "guessDetail="+id,
                dataType: 'json',
                json: 'callback',
                success: function (data) {

                    if (data.resultCode == 100){
                          //猜对了
                        location.href = "award_tree.html?win=1";
                    }else {
                        //错了
                        location.href = "award_tree.html?win=0";

                    }

                }
            });
        }

    });

</script>
<body>
       <canvas  id="c1"></canvas>

      <div class="container">
          <div class="logos">
              <img src="img/1/logo@2x.png">
          </div>
            <div class="tree">
                <div class="sock scok-1" id="1"><img src="img/6/sock.png" alt=""></div>
                <div class="sock scok-2" id="2"><img src="img/6/sock.png" alt=""></div>
                <div class="sock scok-3" id="3"><img src="img/6/sock.png" alt=""></div>
            </div>

          <div class="rule">
               <p>袜子中藏有好友送给你的礼物,正确找到好友藏有礼物的袜子,即可获得常州移动赠送的圣诞礼物 <span class="liuliang">60G</span>流量!(仅限常州移动用户)</p>
          </div>
      </div>
</body>
<script>
    function rnd(n, m){
        return Math.floor(Math.random()*(m-n) + n);
    };

    function d2a(n){
        return n*Math.PI/180;
    };

    var  width1 =  screen.width;
    var height1  = screen.height;
    document.getElementById("c1").width = width1;
    document.getElementById("c1").height = height1;
    //在画布中生成雪花：
    var oC = document.getElementById("c1");
    var gd = oC.getContext("2d");
    var maxW = width1;
    var maxH =height1;
    var arr = [];
    var width = 20;

    for(var i=0; i<100; i++){
        arr.push({
            "left":rnd(0, 800),
            "top":rnd(0, 600),
            "deg":rnd(-10, 10),
            "scale":rnd(2, 10)
        });
    }

    setInterval(function(){
        gd.clearRect(0, 0, oC.width, oC.height);
        gd.save();

        for(var i=0; i<arr.length; i++){
            var h = 0.5 * arr[i].scale;
            arr[i].left = arr[i].left + Math.tan(d2a(arr[i].deg))*h;
            arr[i].top = arr[i].top + h;

            //若已在画面外则删除
            if(arr[i].left < 0 || arr[i].left > maxW || arr[i].top > maxH){
                arr.splice(i--, 1);
                continue;
            }

            var width_i = arr[i].scale;
            var ra = gd.createRadialGradient(arr[i].left, arr[i].top, width_i/4, arr[i].left, arr[i].top, width_i);
            ra.addColorStop(0, "rgba(255,255,255,1)");
            ra.addColorStop(1, "rgba(255,255,255,0.1)");
            gd.fillStyle = ra;

            gd.beginPath();
            gd.arc(arr[i].left, arr[i].top, width_i, 0, 2*Math.PI);
            gd.fill();
        }

        gd.restore();
    }, 16);

    //不断增加新的雪花
    function next(){
        setTimeout(function(){
            if(arr.length < 200){
                for(var i=0; i<20; i++){
                    arr.push({
                        "left":rnd(0, 800),
                        "top":0,
                        "deg":rnd(-10, 10),
                        "scale":rnd(2, 10)
                    });
                }
            }
            next();
        }, Math.random()*200+500);8
    };

    next();
</script>
</html>